<template>
  <view class='list_page'>
    <view class='article_item' v-for='(article,article_index) in list' :key='article_index'>
      <view class='article'>
        <view class='title' :class='{ancive_title:article.height == 0}' @tap='lookArticle(article_index)'>
          <!-- <view class='img_item'><image src='https://s1.ax1x.com/2020/04/28/J4zBZD.jpg'></image></view> -->
          <!-- <view class='text_item' :class='{title_up:article.height == 0}'> -->
          <view class='text_item' :class='{title_up:true}'>
            <!-- <text>【<text class='topic'>#故宫年客流量1900万破纪录#</text>】</text> -->
            {{article.title}}
          </view>
          <view class='num'><view>{{article.num}}</view></view>
        </view>
        <!-- <view class='article_content' :style='{height:article.height+"px"}'> -->
          <view class='content_box' :class='"content"+article_index'>
            <view v-if='article.info'>
              <view class='article_info'>
                <text>{{time(article.info.publishTime,"MM-DD hh:mm")}}</text>
                <text class='platform'>{{article.info.siteName}}</text>
                <text>{{article.info.addOn}}由<text class='author'>{{article.info.addUser}}</text>添加</text>
              </view>
              <view class='article_hint'>{{article.info.allLikeNum}}篇相似文章，今日增加{{article.info.todayLikeNum}}篇，有{{article.info.keyLike}}个重点人参与</view>
              <view class='article_list' v-if='false'>
                <view v-for='(item,index) in 5' :key='index'>
                  <text>【12-25 12:34 浙江日报】</text><text>湖州雾霾如此严重，说好的青山绿湖州雾霾如此严重，说好的青山绿</text>
                </view>
              </view>
              <view class='btn_box'>
                <button class='btn' @tap='lookRemark'>查看备注</button>
                <button class='btn'>办结</button>
              </view>
            </view>

          </view>
          
        </view>
      </view>
      <!-- 收起按钮 弃用 -->
      <view class='up_btn' v-if='false'>
        <view></view>
        <view></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: Array
    },
    data() {
      return {
        time: this.$time,
        show_index: -1,   // 记录已经展开的文章
      }
    },
    watch: {
      list(arr) {
       
          // this.lookArticle(0);
      }
    },
    mounted() {
      
    },
    methods: {
      // 获取详情
      getTrack(item,index) {
        this.$http({
          url: this.$api.attention.get_track,
          data: {
            articleId:item.articleId
          }
        }).then( async res => {
          if(res.code == 0) {
            item.info = res.data;
            // this.$nextTick(async () => {
            //   let h = await this.$getDomInfo(".content"+index,"height");
            //   console.log(h)
            //   this.contentStatus(h,index);
            //   this.$emit('chang',h)
            // })

            // setTimeout(() => {
            //   console.log(h)
            //   let h = await this.$getDomInfo(".content"+index,"height");
              // this.lookArticle(index)
            //   this.contentStatus(h,index);
            //   this.$emit('chang',h)
            // },2000)
            // console.log(index)
            // let h = await this.$getDomInfo(".content"+index,"height");
            // if(h == 0) {
            //   // let timer = setInterval(async () => {
            //   //   h = await this.$getDomInfo(".content"+index,"height");
                
            //   //   if(h != 0) {
            //   //     clearInterval(timer);
            //   //     this.contentStatus(h,index);
            //   //     this.$emit('chang',h)
            //   //   }
            //   // }, 100);
            // }else {
            //   this.contentStatus(h,index);
            //   this.$emit('chang',h)
            // }
          }
        })
      },
      // 点击查看备注
      lookRemark() {
        this.$store.state.remark_status = true;
        this.$store.state.remark_data = {data: "这是备注数据"}
      },
      // 查看文章
      async lookArticle(index) {
        let item = this.list[index];
        let h = 0;
        
        if(item.show) {
          // 收起
          this.contentStatus(0,index);
          this.$emit('chang',h)
        }else {
          // 展开
          if(item.info) {
            h = await this.$getDomInfo(".content"+index,"height")
            this.contentStatus(h,index);
            this.$emit('chang',h)
          }else {
            this.getTrack(item,index)
          }
          
          
        }
        
      },
      // 展开、收起文章内容
      contentStatus(height,index) {
        this.list[index].height = height;
        if(height === 0) {
          // 收起当前点击的文章
          this.list[index].show = false;
          this.show_index = -1;
        }else {
          if(this.show_index != -1) {
            // 收起已展开的文章
            this.list[this.show_index].height = 0;
            this.list[this.show_index].show = false;
            let show_obj = this.list[this.show_index];
            this.$set(this.list,this.show_index,show_obj);
          }
          this.list[index].show = true;
          this.show_index = index;
        }
        let obj = this.list[index];
        
        this.$set(this.list,index,obj);
        
      },
    }
  }
</script>

<style lang="scss" scoped>
.list_page {
  width: 100%;
  padding: 30upx 20upx 20upx;
  box-sizing: border-box;
  .article_item {
    width: 100%;
    margin-bottom: 30upx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .article {
      width: 100%;
      box-shadow: 0px 0px 10upx 0px rgba(34,34,34,0.04);
      border-radius: 12upx;
      padding: 30upx 23upx;
      box-sizing: border-box;
      background: #fff;
      .title {
        width: 100%;
        display: flex;
        .img_item {
          width: 60upx;
          height: 60upx;
          overflow: hidden;
          border-radius: 100%;
          margin-right: 10upx;
          >image {
            width: 100%;
            height: 100%;
          }
        }
        .text_item {
          flex: 1;
          font-size: 30upx;
          font-weight: 800;
          .topic {
            color: #0084FF;
          }
        }
        .title_up {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .num {
          width: 67upx;
          display: flex;
          justify-content: center;
          padding-top: 8upx;
          >view {
            width: 36upx;
            height: 36upx;
            background: #D50D0D;
            border-radius:50%;
            font-size: 24upx;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
      .ancive_title {
        align-items: center;
      }
      .article_content {
        width: 100%;
        overflow: hidden;
        transition: all .5s;
        .content_box {
          width: 100%;
          background: #fff;
          .article_info {
            font-size: 24upx;
            color:#999;
            padding-top: 26upx;
            .platform {
              margin: 0 20upx;
            }
            >text {
              .author {
                margin: 0 15upx;
              }
            }
          }
          .article_hint {
            font-size: 28upx;
            color: #D50D0D;
            font-weight: 600;
            margin-top: 26upx;
          }
          .article_list {
            width: 100%;
            margin-top: 26upx;
            >view {
              width: 100%;
              height: 70upx;
              display: flex;
              align-items: center;
              white-space: nowrap;
              border-top: 1px dashed #E2E2E2;
              font-size: 28upx;
              color: #0084FF;
              >text:nth-child(2) {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #666;
              }
            }
          }
          .tracking_info {
            width: 100%;
            padding: 25upx;
            box-sizing: border-box;
            font-size: 24upx;
            color: #333;
            background: #F7F7F7;
            margin: 0;
            >view {
              margin-top: 5upx;
              &:nth-last-child(1) {
                margin: 0;
              }
            }
          }
          .article_input {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 26upx;
            >view {
              width: 426upx;
              height: 60upx;
              background:#EEEEEE;
              border-radius: 6upx;
              >input {
                width: 100%;
                height: 100%;
                font-size: 24upx;
                padding: 0 20upx;
                box-sizing: border-box;
              }
            }
            >button {
              width: 96upx;
              height: 60upx;
              border: 1px solid rgba(0,132,255,1);
              border-radius: 6upx;
              font-size: 24upx;
              color: #0084FF;
              padding: 0;
              margin: 0;
              background: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              &::after {
                border: none;
              }
            }
          }
          .btn_box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 20upx;
            >button {
              width: 120upx;
              height: 50upx;
              font-size: 22upx;
              margin-left: 20upx;
              &:nth-child(1) {
                background: #fff;
                color: #0084FF;
                border: 1px solid #0084FF;
                box-sizing: border-box;
              }
            }
          }
        }
      }
    }
    .up_btn {
      width: 161upx;
      height: 36upx;
      background:#fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      margin: 0;
      >view {
        width:20upx;
        height:2upx;
        background:#ccc;
        border-radius:1px;
        margin-top: 7upx;
        &:nth-child(1) {
          margin: 0;
        }
      }
      &::after,&::before {
        content: "";
        width: 72upx;
        height: 72upx;
        background: #eee;
        position: absolute;
        top: 0;
      }
      &::after {
        right: -58upx;
        transform: rotate(25deg);
      }
      &::before {
        left: -58upx;
        transform: rotate(-25deg);
      }
    }
  }
}
</style>